<template>
  <div class="register">
    <div class="title"><div class="back-wrapper"><back></back></div>注册</div>
    <div class="logo-wrapper"></div>
    <div class="form">
      <div class="line-item">
        <label class="name">手机号</label>
        <input type="tel" class="ipt " placeholder="请输入手机号" v-model="account" @focus="telLine=true" @blur="telLine=false">
      </div>
      <div class="line-1px">
        <div class="act-1px" :class="{active:telLine}"></div>
      </div>
      <div class="line-item">
        <label class="name">验证码</label>
        <input type="tel" class="ipt " placeholder="请输入验证码" v-model="auth" maxlength="6" @focus="authLine=true" @blur="authLine=false">
        <button class="btn-auth" @click="_getAuthCode">{{authBtnText}}</button>
      </div>
      <div class="line-1px">
        <div class="act-1px" :class="{active:authLine}"></div>
      </div>
      <div class="line-item">
        <label class="name">设置密码</label>
        <input type="password" class="ipt " placeholder="请设置6-12位密码" v-model="password" @focus="pwdLine=true" @blur="pwdLine=false">
      </div>
      <div class="line-1px">
        <div class="act-1px" :class="{active:pwdLine}"></div>
      </div>
      <div class="line-item">
        <label class="name">确认密码</label>
        <input type="password" class="ipt" placeholder="请再次输入密码" v-model="verifyPwd"  @focus="verifyPwdLine=true" @blur="verifyPwdLine=false">
      </div>
      <div class="line-1px">
        <div class="act-1px" :class="{active:verifyPwdLine}"></div>
      </div>
    </div>
    <div class="smt-wrapper">
      <button class="smt" @click="_register">注册</button>
    </div>

  </div>
</template>

<script>
  import back from '../../../components/back/back'
  import {Toast} from 'mint-ui'
  import {isPhoneNum} from "../../../common/js/filter";
  import {setStorage,getStorage} from "../../../common/js/localStorage";
  import global from '../../../common/js/global'
  export default {
    name: "register",
    components:{
      'back':back
    },
    data(){
      return{
        authLine:false,
        telLine:false,
        pwdLine:false,
        verifyPwdLine:false,
        authBtnText:'重新获取',//获取验证码按钮文字
        authBtnTime:60,         //获取验证码按钮重置时间
        account:'',            //账号
        auth:'',               //验证码
        password:'',           //密码
        verifyPwd:''           //确认密码
      }
    },
    methods:{
      /*
      * 获取注册验证码
      * @axios params
      *     bizType => 短信类型:1、注册 2、忘记密码
      *
      * */
      _getAuthCode(){
        //手机号验证
        if(!isPhoneNum(this.account)){
          Toast('请输入正确的手机号')
          return
        }
        //若authBtnTime不为60则按钮不可点击
        if(this.authBtnTime!=60){
          return
        }
        this.$axios(
          {
            method:'post',
            headers:{
              "Content-Type":"application/json",
              "MOBILE-DEVICE":'PSD_H5_1_MPS'
            },
            url:global.$host+'/sms/send',
            data:{
              bizType:1,
              phone:this.account
            }
          }
        ).then((res)=>{
          if(res.status===global.ERR_OK){
            if(res.data.code===0){
              Toast(res.data.data.msg)
            }else {
              Toast(res.data.errorMsg)
            }
          }else {
            Toast('服务器错误，错误代码:'+res.status)
          }

        })
        let time = setInterval(
          ()=>{
            if(this.authBtnTime){
              this.authBtnText = --this.authBtnTime+'s'
            }else{
              this.authBtnText = '重新获取'
              this.authBtnTime=60
              clearInterval(time)
            }
          },1000
        )
      },
      /*
      * 注册
      *
      * */
      _register(){
        if(!isPhoneNum(this.account)){
          Toast('手机号格式错误')
          return
        }
        if(this.auth.length!=6){
          Toast('验证码为空或格式错误')
          return
        }
        if(this.password.length===0){
          Toast('密码不能为空')
          return
        }
        if(this.verifyPwd.length===0){
          Toast('设置密码不能为空')
          return
        }
        if(this.password!=this.verifyPwd){
          Toast('两次输入密码不一致')
          return
        }
        this.$axios(
          {
            method:'post',
            headers:{
              "Content-Type":"application/json",
              "MOBILE-DEVICE":'PSD_H5_1_MPS'
            },
            url:global.$host+'/register',
            data:{
              phone:this.account,
              password:this.password,
              verifyCode:this.auth,
              confirmPassword:this.verifyPwd
            }
          }
        ).then((res)=>{
          if(res.status===global.ERR_OK){
            if(res.data.code===0){
              Toast('注册成功')
              //保存用户信息到localStorage
              setStorage('userInfo',res.data.data)
              console.log(getStorage('userInfo'))
              //登录成功跳转到个人信息页
              setTimeout(()=>{
                this.$router.push('/index/user')
              },1000)
            }else {
              Toast(res.data.errorMsg)
            }
          }else {
            Toast('服务器错误，错误代码:'+res.status)
          }

        })
      }
    }
  }
</script>

<style scoped lang="stylus">
  .register
    user-select: none
    height calc(100% - 18px)
    color #ffffff
    background #101011
    .title
      position relative
      margin-top 10px
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      .back-wrapper
        position absolute
        left 0
        top 0
        width 36px
        height 22px
      .register
        position absolute
        color #ffffff
        right 16px
        font-size 14px
        line-height 22px
        top 4px
    .logo-wrapper
      height 134px
      background url("logo.svg")no-repeat center center /50px 50px
    .form
      .line-1px
        height 1px
        background #343434
        margin 0 35px
        .act-1px
          height 1px
          width 0
          transition width .3s
          background #F7C20F
          &.active
            width 100%
            transition width .3s
      .line-item
        position relative
        height 54px
        line-height 54px
        padding 0 32px
        font-size 0
        .btn-auth
          position absolute
          right 35px
          top 14px
          height 26px
          width 75px
          background none
          border 1px solid #F7C20F
          color #F7C20F
          font-size 12px
          border-radius 2px
          outline none
        .name
          display inline-block
          width 70px
          text-align left
          color #F7C20F
          font-size 16px
        .ipt
          width calc(100% - 90px)
          height 54px
          font-size 16px
          background none
          border none
          padding-left 20px
          outline none
          color #ffffff
    .smt-wrapper
      height 44px
      padding 0 36px
      padding-top 45px
      .smt
        height 44px
        width 100%
        text-align center
        line-height 44px
        background #F7C20F
        border none
        outline none
        border-radius 4px
        color #333333
        font-size 16px
        &:active
          background #ebb90e
    .forgetPwd-wrapper
      padding 0 36px
      text-align right
      margin-top 20px
      .forgetPwd
        color #F7C20F
        text-align right
        font-size 12px
</style>
